<template>
  <div class="execution">
    <basic-container>
      <avue-crud ref="crud"
                 :page="page"
                 :data="tableData"
                 :table-loading="tableLoading"
                 :option="tableOption"
                 v-model="form"
                 @search-change="searchChange"
                 @refresh-change="refreshChange"
                 @row-update="handleUpdate"
                 @row-save="handleSave"
                 @row-del="rowDel">
        <template slot="typeName"
                  slot-scope="scope">
          <div>{{scope.row.typeName}}</div>
        </template>
        <template slot="menuLeft">
          <el-button type="primary"
                     @click="handleAdd"
                     size="small">新 增
          </el-button>
          <br/><br/>
        </template>
        <template slot-scope="scope"
                  slot="menu">
          <el-button type="text"
                     icon="el-icon-check"
                     size="small"
                     plain
                     @click="handleEdit(scope.row,scope.index)">编辑
          </el-button>
          <el-button type="text"
                     icon="el-icon-delete"
                     size="small"
                     plain
                     @click="handleDel(scope.row,scope.index)">删除
          </el-button>
        </template>
        <template slot="typeNameForm"
                  slot-scope="scope">

          <el-select
            v-model="brandTypeId"
            filterable
            @change="handlerBrandTypeChange"
            placeholder="请输入关键词"
            :loading="loading">
            <el-option
              v-for="item in brandTypeList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>

        </template>
      </avue-crud>
    </basic-container>
  </div>
</template>

<script>
  import {fetchList, getObj, addObj, putObj, delObj, search} from '@/api/merchantservices/brand'
  import {tableOption} from '@/const/crud/merchantservices/brand'
  import {getAllShops} from '@/api/shop/shops'
  import {SERVICES_TYPE_DIC, IS_SHOW} from '@/utils/util'

  export default {
    name: 'brand',
    data() {
      return {
        loading: false,
        services_type_dic: SERVICES_TYPE_DIC.service_type,
        shopsProps: {
          label: "shopName",
          value: 'id'
        },
        brandTypeProps: {
          label: "name",
          value: 'id'
        },
        shopsOptions: [],
        brandTypeList: [],
        shopId: '',
        brandTypeId: '',
        searchShopId: '',
        shopName: '',
        brandTypeName: '',
        checkedType: 1,
        tableData: [],
        page: {
          total: 0, // 总页数
          currentPage: 1, // 当前页数
          pageSize: 20 // 每页显示多少条
        },
        tableLoading: false,
        tableOption: tableOption,
        form: {},
      }
    },
    created() {
    },
    mounted: function () {
      this.getAllShops()
      this.getBrandTypeList()
      this.getList(this.page)
    },
    watch: {
      shopName() {
        this.form.shopName = this.shopName
      },
      brandTypeName() {
        this.form.typeName = this.brandTypeName
      }
    },
    // computed: {
    //   ...mapGetters(['permissions'])
    // },
    methods: {
      getAllShops() {
        const data = new FormData()
        data.append('shopId', this.$store.state.user.shopId)
        getAllShops(data)
          .then((res) => {
            this.shopsOptions = res.data.data
            if (!this.shopName) {
              this.shopName = this.shopsOptions[0].shopName;
            }
          });
      },
      getList(page, params) {
        this.tableLoading = true
        fetchList(Object.assign({
          current: page.currentPage,
          size: page.pageSize,
        }, params)).then(response => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false
        })
      },
      /**
       * @title 打开新增窗口
       * @detail 调用crud的handleadd方法即可
       *
       **/
      handleAdd: function () {
        this.getAllShops()
        this.$refs.crud.rowAdd()
        // this.form.shopName = this.shopName
        // this.shopId = this.searchShopId
        this.brandTypeId = ''
        this.brandTypeName = ''
      },
      handleEdit(row, index) {
        this.getAllShops()
        this.shopId = row.shopId
        this.$refs.crud.rowEdit(row, index)
      },
      handleDel(row, index) {
        this.$refs.crud.rowDel(row, index)
      },
      rowDel: function (row, index) {
        var _this = this
        this.$confirm('是否确认删除ID为' + row.id, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(function () {
          return delObj(row.id)
        }).then(data => {
          _this.tableData.splice(index, 1)
          _this.$message({
            showClose: true,
            message: '删除成功',
            type: 'success'
          })
          this.getList(this.page, {type: this.checkedType, shopId: this.shopId})
        }).catch(function (err) {
        })
      },
      /**
       * @title 数据更新
       * @param row 为当前的数据
       * @param index 为当前更新数据的行数
       * @param done 为表单关闭函数
       *
       **/
      handleUpdate: function (row, index, done) {
        row.type = this.checkedType
        row.shopId = this.shopId
        row.shopName = this.shopName
        putObj(row).then(data => {
          this.tableData.splice(index, 1, Object.assign({}, row))
          this.$message({
            showClose: true,
            message: '修改成功',
            type: 'success'
          })
          done()
          this.searchShopId = this.shopId
          this.getList(this.page, {type: this.checkedType, shopId: this.shopId})
        })
      },
      /**
       * @title 数据添加
       * @param row 为当前的数据
       * @param done 为表单关闭函数
       *
       **/
      handleSave: function (row, done) {
        row.typeId = this.brandTypeId
        addObj(row).then(data => {
          this.tableData.push(Object.assign({}, row))
          this.$message({
            showClose: true,
            message: '添加成功',
            type: 'success'
          })
          done()
          this.searchShopId = this.shopId
          this.getList(this.page, {type: this.checkedType, shopId: this.shopId})
        })
      },
      /**
       * 刷新回调
       */
      refreshChange() {
        this.getList(this.page, {type: this.checkedType, shopId: this.shopId})
      },
      handlerShopsChange(value) {
        this.shopId = value
        for (let i = 0; i < this.shopsOptions.length; i++) {
          if (this.shopsOptions[i].id == value) {
            this.shopName = this.shopsOptions[i].shopName
          }
        }
      },
      handlerBrandTypeChange(value) {
        this.brandTypeId = value
        for (let i = 0; i < this.brandTypeList.length; i++) {
          if (this.brandTypeList[i].id == value) {
            this.brandTypeName = this.brandTypeList[i].name
          }
        }
      },
      handlerSearchWithType(value) {
        this.checkedType = value
        this.getList(this.page, {
          type: this.checkedType,
          shopId: this.shopId
        })
      },
      handleShopsChange(val) {
        if (val) {
          this.searchShopId = val
          for (let i = 0; i < this.shopsOptions.length; i++) {
            if (this.shopsOptions[i].id === val) {
              this.shopName = this.shopsOptions[i].shopName
            }
          }
          this.getList(this.page, {
            type: this.checkedType,
            shopId: val
          })
        }
      },
      searchChange(params) {
        params.type = this.checkedType,
          params.shopId = this.searchShopId
        if (params) {
          this.getList(this.page, params)
        }
      },
      // 获取所有的商品类型
      getBrandTypeList() {
        this.$http({
          url: this.$http.adornUrl('/brandType/getAllTypeList'),
          method: 'get',
        }).then(res => {
          this.brandTypeList = res.data.data
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
</style>
